<!DOCTYPE html>
<html>
	<head>
		<title>JS Templating</title>
		<link href="../../common/docs/docs.css" rel="stylesheet" type="text/css">
		<script src="../../Dependencies/src/?need=Template"></script>
		<script>
			function init()
			{
				var d = new Date();
				var t = new Template("tpl_1");
				t.assign("lorem", "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed est convallis, aliquet lectus id, pulvinar mi. Aliquam ultrices vehicula turpis sed eleifend. Morbi sagittis malesuada mi a pellentesque.");
				t.assign("baseValue", 100);
				t.assign("table", [
					{value1:12, value2:0},
					{value1:23, value2:1},
					{value1:"aze", value2:24}
				]);
				t.setFunction("add2", function()
				{
					var result = 0;
					for(var i = 0, max = arguments.length;i<max;i++)
					{
						result+=Number(arguments[i]);
					}
					return result;
				});
				t.render("#placeholder");
			}
		</script>
	</head>
	<body onload="init()">
		<header>
			<h1>Template.js - functions - (ctrl + u)</h1>
		</header>
		<div id="placeholder" class="content">

		</div>
		<script type="html/template" id="tpl_1">
			<h3>Basics</h3>
			<table>
				<tr>
					<td>Normal : </td>
					<td>{$lorem}</td>
				</tr>
				<tr>
					<td>Truncate :</td>
					<td>{=truncate($lorem, 25)}</td>
				</tr>
				<tr>
					<td>Uppercase :</td>
					<td>{=uppercase($lorem)}</td>
				</tr>
				<tr>
					<td>Lowercase :</td>
					<td>{=lowercase($lorem)}</td>
				</tr>
				<tr>
					<td>Replace :</td>
					<td>{=replace($lorem, 'i', '!')}</td>
				</tr>
			</table>
			<h3>Custom : addition</h3>
			<ul>
				{foreach $table $item $key}
				<li>
					{$baseValue}+{$item.value1}+{$item.value2}+{$key}={=add($baseValue, $item.value1, $item.value2, $key)}
				</li>
				{/foreach}
			</ul>
		</script>
	</body>
</html>